<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport"
	content="width=device-width, initial-scale=1">
<!-- 页面标题 -->
<title>蜗牛拍拍管理系统</title>
<link rel="stylesheet" th:href="@{/lay/layui/css/layui.css}" />
<link rel="stylesheet" th:href="@{/moon/css/bootstrap.css}" />
<script th:src="@{/moon/js/jquery.js}"></script>
<script th:src="@{/moon/js/vue.js}"></script>
<script th:src="@{/lay/layui/layui.js}"></script>
<script th:src="@{/moon/js/bootstrap.js}"></script>
<script th:src="@{/chart/echarts.js}"></script>

<style>
/* hr{
   margin-bottom:50px;
   border:0.5px solid #EBEBEB;
} */
.layuiadmin-big-font {
	font-size: 40px;
	color: #666;
	margin: 10px auto;
}

.cardbody-small-font {
	font-size: 13px;
	color: #666;
}

div {
	/* 	border: 0.1px solid red; */
	padding: 0;
	margin: 0;
	padding: 0;
}

.layuiadmin-card-text-top {
	font-size: 30px;
	line-height: 100%;
	height: 100%;
	color: #666;
	margin: 10px auto;
}

.layui-text-top-top {
	font-size: 30px;
	line-height: 100%;
	height: 100%;
	color: #666;
	margin: 10px auto;
}

.layuiadmin-card-text-sub {
	background-color: #f8f8f8;
	font-size: 13px;
	color: #666;
}

.layui-field-title {
	text-align: left;
}
</style>


</head>
<body >

			<div style="text-align: center;width:100%;height:100%">
				<!-- 页面标题 -->


				<!-- 主体区域> -->
				<div id="app"
					style="padding: 20px; margin-bottom: 20px; background-color: #F2F2F2;">
					<div class="layui-row layui-col-space15">


						<h3 style="text-align: left">
							平台概览 <small>Platform Overview</small>
						</h3>
						<hr style="padding: 0; border: 0.5px solid #EBEBEB;">
						<!-- 1行1列：注册用户-->
						<div class="layui-col-md3 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">
									<div>注册用户（人）</div>
									<div style="text-align: right">
										<span class="layui-badge layui-bg-blue layuiadmin-badge"
											style="text-align: right">历史累计</span>
									</div>
								</div>
								<div class="layui-card-body layuiadmin-card-list">
									<p class="layuiadmin-big-font" v-cloak>{{allData.userCount}}</p>
									<p class="cardbody-small-font" style="margin-top: 20px">
										今日新增：<span class="layuiadmin-span-color"
											style="text-align: right" v-cloak>{{allData.countUserRegisterToday}}</span>
									</p>
								</div>
							</div>
						</div>

						<!-- 1行2列：成交用户-->
						<div class="layui-col-md3 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">
									<div>成交用户（人）</div>
									<div style="text-align: right">
										<span class="layui-badge layui-bg-blue layuiadmin-badge"
											style="text-align: right">历史累计</span>
									</div>
								</div>
								<div class="layui-card-body layuiadmin-card-list">
									<p class="layuiadmin-big-font" v-cloak>{{allData.dealUserCount}}</p>
									<p class="cardbody-small-font" style="margin-top: 20px">
										成交用户占比：<span class="layuiadmin-span-color"
											style="text-align: right" v-cloak>{{(allData.dealUserCount/allData.userCount*100).toFixed(0)}}%</span>
									</p>
								</div>
							</div>
						</div>

						<!-- 1行3列：成交金额 -->
						<div class="layui-col-md3 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">
									<div>成交金额（人民币元）</div>
									<div style="text-align: right">
										<span class="layui-badge layui-bg-blue layuiadmin-badge"
											style="text-align: right">历史累计</span>
									</div>
								</div>
								<div class="layui-card-body layuiadmin-card-list">
									<p class="layuiadmin-big-font" v-cloak>{{allData.totalDealAmount}}</p>
									<p class="cardbody-small-font" style="margin-top: 20px">
										今日新增：<span class="layuiadmin-span-color"
											style="text-align: right" v-cloak>{{allData.DealAmountToday}}</span>
									</p>
								</div>
							</div>
						</div>

						<!-- 1行4列：成交商品 -->
						<div class="layui-col-md3 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">
									<div>成交商品（件）</div>
									<div style="text-align: right">
										<span class="layui-badge layui-bg-blue layuiadmin-badge"
											style="text-align: right">历史累计</span>
									</div>
								</div>
								<div class="layui-card-body layuiadmin-card-list">
									<p class="layuiadmin-big-font" v-cloak>{{allData.totalDealProductCount}}</p>
									<p class="cardbody-small-font" style="margin-top: 20px">
										今日新增：<span class="layuiadmin-span-color"
											style="text-align: right" v-cloak>{{allData.dealProductTodayCount}}</span>
									</p>
								</div>
							</div>
						</div>
					</div>

					<!-- ——————————————————————第2行开始———————————————————————————— -->

					<div class="layui-row layui-col-space15" style="text-align: center">
						<h3 style="text-align: left">
							用户概览 <small>User Overview</small>
						</h3>
						<hr style="padding: 0; border: 0.5px solid #EBEBEB;">
						<div class="layui-col-md3 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">日注册（人）</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space10">
										<div class="layui-col-xs12 layui-col-sm12">
											<div class="layuiadmin-card-text-top">
												<div class="layui-text-top-top" v-cloak>{{allData.countUserRegisterToday}}</div>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub">昨日</div>
												<p class="layui-text-center-sub" v-cloak>{{allData.registerCountYesterday}}</p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub">今日-昨日</div>
												<p class="layui-text-center-sub" v-cloak>{{allData.countUserRegisterToday-allData.registerCountYesterday}}</p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub">今日/昨日</div>
												<p class="layui-text-center-sub" v-cloak>{{(allData.countUserRegisterToday/allData.registerCountYesterday*100).toFixed(1)}}%</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="layui-col-md3 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">周注册（人）</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space10">
										<div class="layui-col-xs12 layui-col-sm12">
											<div class="layuiadmin-card-text-top">
												<div class="layui-text-top-top" v-cloak>{{allData.registerCountThisWeek}}</div>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>上周</div>
												<p class="layui-text-center-sub">{{allData.registerCountLastWeek}}</p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本周-上周</div>
												<p class="layui-text-center-sub" v-cloak>{{allData.registerCountThisWeek-allData.registerCountLastWeek}}</p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本周/上周</div>
												<p class="layui-text-center-sub" v-cloak>{{(allData.registerCountThisWeek/allData.registerCountLastWeek*100).toFixed(1)}}%</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="layui-col-md3 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">月注册（人）</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space10">
										<div class="layui-col-xs12 layui-col-sm12">
											<div class="layuiadmin-card-text-top">
												<div class="layui-text-top-top" v-cloak>{{allData.registerCountThisMonth}}</div>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub">上月</div>
												<p class="layui-text-center-sub" v-cloak>{{allData.registerCountLastMonth}}</p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub">本月-上月</div>
												<p class="layui-text-center-sub" v-cloak>{{allData.registerCountThisMonth-allData.registerCountLastMonth}}</p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub">本月/上月</div>
												<p class="layui-text-center-sub" v-cloak>{{(allData.registerCountThisMonth/allData.registerCountLastMonth*100).toFixed(1)}}%</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="layui-col-md3 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">阶段注册达成比</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space10"
										style="font-size: 12px;">
										<div class="layui-col-xs12 layui-col-sm3"
											style="padding: 0; margin-top: 7px;">
											<div class="layuiadmin-card-text">今日/昨日</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm9"
											style="padding: 0; margin-top: 9px;">
											<div class="progress">
												<div id="userday"
													class="progress-bar progress-bar-striped active"
													role="progressbar" aria-valuenow="45" aria-valuemin="0"
													aria-valuemax="100" style="width: 95%">
													{{(allData.countUserRegisterToday/allData.registerCountYesterday*100).toFixed(1)}}%
												</div>
											</div>
										</div>

										<div class="layui-col-xs12 layui-col-sm3"
											style="padding: 0; margin: 0;">
											<div class="layuiadmin-card-text">本周/上周</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm9"
											style="padding: 0; margin: 0;">
											<div class="progress">
												<div id="userweek"
													class="progress-bar progress-bar-warning progress-bar-striped active"
													role="progressbar" aria-valuenow="45" aria-valuemin="0"
													aria-valuemax="100" style="width: 95%">
													{{(allData.registerCountThisWeek/allData.registerCountLastWeek*100).toFixed(1)}}%
												</div>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm3"
											style="padding: 0; margin: 0;">
											<div class="layuiadmin-card-text">本月/上月</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm9"
											style="padding: 0; margin: 0;">
											<div class="progress">
												<div id="usermonth"
													class="progress-bar progress-bar-danger progress-bar-striped active"
													role="progressbar" aria-valuenow="45" aria-valuemin="0"
													aria-valuemax="100" style="width: 95%">
													{{(allData.registerCountThisMonth/allData.registerCountLastMonth*100).toFixed(1)}}%
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>




					</div>

					<!-- ——————————————————————第3行开始———————————————————————————— -->
					<div class="layui-row layui-col-space15" style="text-align: center">
						<h3 style="text-align: left">
							订单概览 <small>Order Overview</small>
						</h3>
						<hr style="padding: 0; border: 0.5px solid #EBEBEB;">
						<div class="layui-col-md6 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">成交金额（元）</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space10">
										<div class="layui-col-xs12 layui-col-sm12">
											<div class="layuiadmin-card-text-top">
												<div class="layui-text-top-top" v-cloak>{{allData.dealAmountToday}}</div>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>昨日：{{allData.dealAmountYesterday}}</div>
												<p class="layui-text-center-sub"></p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本周：{{allData.dealAmountThisWeek}}</div>
												<p class="layui-text-center-sub" v-cloak></p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本月：{{allData.dealAmountThisMonth}}</div>
												<p class="layui-text-center-sub" v-cloak></p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>


						<div class="layui-col-md6 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">成交订单数（个）</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space10">
										<div class="layui-col-xs12 layui-col-sm12">
											<div class="layuiadmin-card-text-top">
												<div class="layui-text-top-top" v-cloak>{{allData.dealOrderCountToday}}</div>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>昨日：{{allData.dealOrderCountYesterday}}</div>
												<p class="layui-text-center-sub" v-cloak></p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本周：{{allData.dealOrderCountThisWeek}}</div>
												<p class="layui-text-center-sub" v-cloak></p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本月：{{allData.dealOrderCountThisMonth}}</div>
												<p class="layui-text-center-sub" v-cloak></p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
<!-- 成交金额图表开始—————————————————————————————————————————————————————————————————————————————————————————————————————— -->

						<div class="layui-col-md6 layui-col-sm6">
							<div class="layui-card">
							<div class="layui-card-header">成交金额趋势图（人民币元）</div>
								<div class="layui-card-body">
									<!-- 图表开始 -->
									<div id="dealamountchart" style="width:100%;height:200px;"></div>
								</div>
							</div>
						</div>
<!-- 成交金额图表结束—————————————————————————————————————————————————————————————————————————————————————————————————————— -->
<!-- 成交金额图表开始—————————————————————————————————————————————————————————————————————————————————————————————————————— -->

						<div class="layui-col-md6 layui-col-sm6">
							<div class="layui-card">
							<div class="layui-card-header">成交订单（个）</div>
								<div class="layui-card-body">
									<!-- 图表开始 -->
									<div id="ordercountchart" style="width:100%;height:200px;"></div>
								</div>
							</div>
						</div>
<!-- 成交金额图表结束—————————————————————————————————————————————————————————————————————————————————————————————————————— -->						
						
						
						
					</div>
					<!-- 第四行开始 _________________________________________________________-->
					<div class="layui-row layui-col-space15">
						<h3 style="text-align: left">
							财务概览 <small>Finance Overview</small>
						</h3>
						<hr style="padding: 0; border: 0.5px solid #EBEBEB;">
						<div class="layui-col-md6 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">交易流水（元）</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space10">
										<div class="layui-col-xs12 layui-col-sm12">
											<div class="layuiadmin-card-text-top">
												<div class="layui-text-top-top" v-cloak>{{allData.tradingFlowToday}}</div>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>昨日：{{allData.tradingFlowYesterday}}</div>
												<p class="layui-text-center-sub"></p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本周：{{allData.tradingFlowThisWeek}}</div>
												<p class="layui-text-center-sub"></p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本月：{{allData.tradingFlowThisMonth}}</div>
												<p class="layui-text-center-sub"></p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="layui-col-md6 layui-col-sm6">
							<div class="layui-card">
								<div class="layui-card-header">佣金收入（元）</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space10">
										<div class="layui-col-xs12 layui-col-sm12">
											<div class="layuiadmin-card-text-top">
												<div class="layui-text-top-top">{{allData.commissionRevenueToday}}</div>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>昨日：{{allData.commissionRevenueYesterday}}</div>
												<p class="layui-text-center-sub"></p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本周：{{allData.commissionRevenueThisWeek}}</div>
												<p class="layui-text-center-sub"></p>
											</div>
										</div>
										<div class="layui-col-xs12 layui-col-sm4">
											<div class="layuiadmin-card-text-sub">
												<div class="layui-text-top-sub" v-cloak>本月：{{allData.commissionRevenueThisMonth}}</div>
												<!-- <p class="layui-text-center-sub" v-cloak>{{allData.commissionRevenueThisMonth}}</p> -->
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 第四行结束 -->
				</div>
			</div>
		<script>

			//监听锚点变化，并获取锚点的值
			window.onhashchange = function() {
				var hash = location.hash;
				hash = hash.substring(1, hash.length);
			}

			//点击菜单时：1、改变iframe地址；2、
			function loadIframe(path) {
				//将右侧的iframe地址重置
				$("#rightiframe").attr("src", path);
				var u = window.location.href;
				var end = u.indexOf("#");
				var rurl = u.substring(0, end);
				//设置新的锚点
				window.location.href = rurl + "#" + path;
			}

			//加载页面时将锚点赋值给url
			document.addEventListener('DOMContentLoaded', function() {
				var hash = location.hash;
				var url = hash.substring(1, hash.length);
				$("#rightiframe").attr("src", url);
			}, false)

			//注意：导航 依赖 element 模块，否则无法进行功能性操作
			layui.use('element', function() {
				var element = layui.element;
			});

			var app = new Vue(
					{
						el : "#app",
						data : {
							allData : [],
						},
						//页面启动时加载函数
						mounted : function() {
							this.showdata();
						},
						//函数
						methods : {
							showdata : function() {
								$
										.post(
												"/auction/Admin/mainframedata",
												{},
												function(data) {
													app.allData = data;
													$("#dealuserpercent")
															.css(
																	"width",
																	(app.allData.dealUserCount
																			/ app.allData.userCount * 100)
																			.toFixed(0)
																			+ "%");
													$("#userday")
															.css(
																	"width",
																	(app.allData.countUserRegisterToday
																			/ app.allData.registerCountYesterday * 100)
																			.toFixed(0)
																			+ "%");
													$("#userweek")
															.css(
																	"width",
																	(app.allData.registerCountThisWeek
																			/ app.allData.registerCountLastWeek * 100)
																			.toFixed(0)
																			+ "%");
													$("#usermonth")
															.css(
																	"width",
																	(app.allData.registerCountThisMonth
																			/ app.allData.registerCountLastMonth * 100)
																			.toFixed(0)
																			+ "%");

													//alert(data.userCount);
													/* var r=$.parseJSON(data);
													alert(r);
													$("#userCount").html(r.userCount+"人");
													$("#countUserRegisterToday").html("今日新增"+r.countUserRegisterToday+"人");
													$("#DealAmountToday").html("今日成交"+r.DealAmountToday+"元");
													$("#totalDealProductCount").html(r.totalDealProductCount+"件");
													$("#totalDealAmount").html(r.totalDealAmount+"元");
													$("#dealProductTodayCount").html("今日新增"+r.dealProductTodayCount+"件"); */
												});
							}
						}
					});
		</script>
		
		<script>
		// 基于准备好的dom，初始化echarts实例

		
        //异步加载成交金额数据
        $(function(){
			$.ajax({
				type:"POST",
				url:"/auction/Order/dealamountchart",
				success:function(data){
					var myChart1 = echarts.init(document.getElementById('dealamountchart'));
					//json是好几个对象，现在要做的是把几个对象中的dealprice值都取出来
					var json=JSON.parse(data);
					var dealArr=[];
					var TimeArr=[];
					for(var i=0;i<json.length;i++){
						dealArr[i]=json[i].dealprice;
					}
					for(var i=0;i<json.length;i++){
						//在这里进行时间转换
						TimeArr[i]=json[i].dealtime;
					}
					 myChart1.setOption({
						 tooltip: {},
			                grid:{
			                    top:"15px",
			                    left:'10%',
			                    right:"15px",
			                    bottom:"30px"
			                },
			                xAxis: {
			                	type: 'category',
			                	 data:TimeArr
			                },
			                yAxis: {
			                	type: 'value',
			                	
			                	splitLine:{show:false }
			                },
			                series: [{
			                	name:'成交额',
			                	 data:dealArr,
			                    type: 'line',
			                    areaStyle: {},
			                }]
					    });
				},
				error:function(data){
					alert("加载出错");
				}
				
			});
        });
        </script>
		
	<script>
	$(function(){
		$.ajax({
			type:"POST",
			url:"/auction/Order/ordercountchart",
			success:function(data){
				var myChart1 = echarts.init(document.getElementById('ordercountchart'));
				//json是好几个对象，现在要做的是把几个对象中的dealprice值都取出来
				var json=JSON.parse(data);
				var dealArr=[];
				var TimeArr=[];
				for(var i=0;i<json.length;i++){
					dealArr[i]=json[i].ordercount;
				}
				for(var i=0;i<json.length;i++){
					//在这里进行时间转换
					TimeArr[i]=json[i].dealtime;
				}
				 myChart1.setOption({
					 tooltip: {},
		                grid:{
		                    top:"15px",
		                    left:'10%',
		                    right:"15px",
		                    bottom:"30px"
		                },
		                xAxis: {
		                	type: 'category',
		                	 data:TimeArr
		                },
		                yAxis: {
		                	type: 'value',
		                	
		                	splitLine:{show:false }
		                },
		                series: [{
		                	name:'成交订单数',
		                	 data:dealArr,
		                	 type:'bar',
		                	 color:'#61a0a8',
		                	 barWidth : 25,
		                	 BarColor:'blue',
		                	 
		                	 
		                }]
				    });
			},
			error:function(data){
				alert("加载出错");
			}
			
		});
    });
		</script>
		
		
		
</body>
</html>